<template>

    <div class="content-item sync-etsystyle">
        <h2>
            <strong>Style</strong>
            <em v-if="error">Please select a Style</em>
        </h2>

        <UxLoading class="content-loading" v-if="loading" />
        <div class="content-nodta" v-else-if="list.length == 0">
            <span>Failed to load etsy taxonomy list, please reload again.</span>
            <button @click="getList()">reload</button>
        </div>

        <p v-for="item in list" :class="{ active: active == item.id }" @click="active = item.id" :key="item.id">
            <span v-text="item.class_name"></span>
        </p>
    </div>

</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "SynchronizeEtsyStyle",
    props: {
        value: { type: [String, Number], default: () => '' },
    },
    data () {
        return {
            loading: true,
            error: false,
            list: [],
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            shop: "shop",
        }),
        active: {
            get () {
                return this.value;
            },
            set (val) {
                if (this.value != val) {
                    this.$emit('input', val);
                }
            },
        },
    },


    methods: {

        // 检查状态
        // checkError () {
        //     let error = [];
        //     let shop_type = this.info.shop_type;

        //     if (!this.checkable) {
        //         // 不开检查不管
        //     } else if (shop_type == 2) {
        //         // etsy 同步必须选择style和Shipping profile
        //         if (!this.info.taxonomy_id) {
        //             error.push("taxonomy_id");
        //         }
        //         if (!this.action && !(this.info.is_new_shipping || this.info.shipping_profile_id)) {
        //             error.push("shipping_profile_id");
        //         }
        //     }

        //     this.error = error;
        // },

        checkError () {
            if (!this.active) {
                this.error = true;
                this.$uxMessage.error({
                    message: "Please select a Style",
                    duration: 5000,
                });
                return false
            } else {
                this.error = false;
                return true;
            }
        },

        getList () {

            const product_id = (this.clothes[0] || {}).product_id || 0
            this.loading = true;
            // 商品id
            this.$http("UserStore.getEtsyTaxonomy/" + product_id).then(
                (response) => {
                    if (response.code === 0) {
                        this.list = response.data || [];
                        this.loading = false;
                    } else {
                        this.loading = false;
                    }
                }
            );
        },

    },
    created () {
        this.getList();
        this.$on('global:SYNCHRONIZE_CHECK', this.checkError)
    },
};
</script>
<style lang="scss" scoped>
.sync-etsystyle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;

    .content-loading {
        position: relative;
        height: 58px;
        width: 80px;
        margin: 0;
        padding: 0;
    }

    .content-nodta {
        display: flex;
        flex-direction: column;

        span {
            font-size: 14px;
            line-height: 18px;
            color: #f00;
        }

        button {
            margin-top: 8px;
            width: 80px;
            height: 32px;
        }
    }

    & > p {
        display: inline-block;
        position: relative;
        height: 18px;
        font-size: 14px;

        color: #000000;
        line-height: 18px;
        padding-left: 30px;
        padding-right: 50px;
        cursor: pointer;
        user-select: none;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            border-radius: 9px;
            border: 2px solid #919191;
            box-sizing: border-box;
        }

        &::after {
            display: none;
            content: '';
            position: absolute;
            left: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background: #ea4c89;
            border-radius: 9px;
        }

        &.active {
            &::before {
                border-color: #ea4c89;
            }
            &::after {
                display: block;
            }
        }

        & + p {
            margin-top: 16px;
        }
    }
}
</style>
